import React, { Component } from "react";
import { Upload, Icon, Button, message } from "antd";

export default class componentName extends Component {
    constructor(props) {
        super(props);
        this.state = { date: new Date() };
    }
    render() {
        const { ...props } = this.props;
        return (
            <React.Fragment>
                {props.leftSquare && !props.leftImg && (
                    <Upload.Dragger
                        name="files"
                        multiple={false}
                        beforeUpload={e => {
                            props.upload(e, props.type);
                        }}
                    >
                        {!props.leftFileTooBig && (
                            <div className="yl-ai-body-test-panel-upload-before">
                                <div className="ant-upload-text">
                                    <Icon type="cloud" />
                                    拖拽图片至框内
                </div>
                                <div className="ant-upload-button">
                                    <Button>上传图片</Button>
                                </div>
                                <div className="ant-upload-button-describe">
                                    图片文件类型支持jpg、jpeg、png、
                    图片大小不超过5M
                </div>
                            </div>
                        )}
                        {props.leftFileTooBig && (
                            <div className="show">文件超过超过最大尺寸(5MB)</div>
                        )}
                        {props.leftFileFormatFalse && (
                            <div className="show">仅支持jpg，jpeg，png格式</div>
                        )}
                    </Upload.Dragger>
                )}
                {props.leftImg && ( //左边上传图片
                    <div className="upload-preview">
                        <div className="preview-del-icon" style={{ zIndex: "1000" }}>
                            <Icon
                                onClick={() => {
                                    props.del(props.type);
                                }}
                                title="删除"
                                type="delete"
                            />
                        </div>
                        {!props.leftIsPeople && (
                            <div className="show">未检测到人脸，请重新上传图片 </div>
                        )}
                        {props.leftTooMuchPeople && (
                            <div className="show">检测到多张人脸，请上传单张人脸图片</div>
                        )}
                        {/* {props.leftFileVisible==="" && ( */}
                        <img
                            className="preview-img"
                            id="the_left_img"
                            src={props.leftImg}
                            title=""
                            alt=""
                            style={{ visibility: props.leftFileVisible === "visible" ? "visible" : "hidden" }}
                        />
                        {/* )} */}

                        <canvas width="340" height="320" id="uploadFile_canvas"></canvas>
                    </div>
                )}
                {props.rightSquare && !props.rightImg && (
                    <Upload.Dragger
                        name="files"
                        multiple={false}
                        beforeUpload={e => {
                            props.upload(e, props.type);
                        }}
                    >
                        {!props.rightFileTooBig && (
                            <div className="yl-ai-body-test-panel-upload-before">
                                <div className="ant-upload-text">
                                    <Icon type="cloud" />
                                    拖拽图片至框内
                </div>
                                <div className="ant-upload-button">
                                    <Button>上传图片</Button>
                                </div>
                                <div className="ant-upload-button-describe">
                                    图片文件类型支持jpg、jpeg、png、
                    图片大小不超过5M
                </div>
                            </div>
                        )}
                        {props.rightFileTooBig && (
                            <div className="show">文件超过超过最大尺寸限制(5MB)</div>
                        )}
                        {props.rightFileFormatFalse && (
                            <div className="show">仅支持jpg，jpeg，png格式</div>
                        )}
                    </Upload.Dragger>
                )}
                {props.rightImg && ( //右边上传图片
                    <div className="upload-preview">
                        <div className="preview-del-icon" style={{ zIndex: "1000" }}>
                            <Icon
                                onClick={() => {
                                    props.del(props.type);
                                }}
                                title="删除"
                                type="delete"
                            />
                        </div>
                        {!props.rightIsPeople && (
                            <div className="show">未检测到人脸，请重新上传图片 </div>
                        )}
                        {props.rightTooMuchPeople && (
                            <div className="show">检测到多张人脸，请上传单张人脸图片</div>
                        )}
                        <img
                            className="preview-img"
                            id="the_left_imgB"
                            src={props.rightImg}
                            title=""
                            alt=""
                            style={{ visibility: props.rightFileVisible === "visible" ? "visible" : "hidden" }}
                        />
                        <canvas width="340" height="320" id="uploadFile_canvasB"></canvas>
                    </div>
                )}
            </React.Fragment>
        );
    }
}
